<template>
  <div class="signal">
    <div class="label">
      <div class="text">玻璃位置</div>
      <div class="value">
        <dict-tag :options="dict.type.quartz_common_location" :value="place" />
      </div>
    </div>
    <div class="label">
      <div class="text">字典值</div>
      <div class="value">
        {{ place }}
      </div>
    </div>
    <div class="SignalLabel">
      <div class="title">设备信号</div>
    </div>
    <div class="location">
      <div class="deviceNo" v-if="Array.isArray(deviceMap.dictValue)">
        <div
          v-for="(item, index) in deviceMap.dictValue"
          :key="index"
          class="item"
          @click="handlerCheckN(index)"
          :class="activeN == index ? 'activeN' : ''"
        >
          {{ deviceMap.deviceValue[index] }}
        </div>
      </div>
      <div v-else>
        {{ deviceMap.name }}
      </div>
    </div>
    <div class="table">
      <div class="table_label">
        <div class="item">指令</div>
        <div class="item">状态</div>
        <div class="item action">操作</div>
      </div>
      <div class="list">
        <div class="ul" v-for="item in signalData" :key="item.id">
          <div class="item">{{ item.cmdType }}</div>
          <div class="item">
            <el-tag :type="item | tagType">{{ item.state | status }}</el-tag>
          </div>
          <div class="item action">
            <el-button
              icon="el-icon-close"
              type="text"
              v-if="!item.state"
              @click="handlerCmd('fallbackAction', item)"
              >取消</el-button
            >
            <el-button
              icon="el-icon-check"
              type="text"
              v-if="!item.state"
              @click="handlerCmd('executionCompleted', item)"
              >完成</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mergeList } from "@/views/production/device/Config/label";
import { getPlcSignal } from "@/api/assembly/cage";
import mixin from "@/views/production/device/mixin/index";
const filterDevicePlace = (place) => {
  let map = null;
  mergeList.forEach((item) => {
    if (!item.rangValue.includes(place * 1)) return;
    map = item;
  });

  return map;
};

export default {
  mixins: [mixin],
  dicts: [
    "quartz_glass_state",
    "quartz_common_location_search",
    "quartz_common_location",
  ],
  data() {
    let that = this;
    return {
      place: that.$route.query.place || 0,
      deviceMap: null,
      activeN: 0,
      signalData: [],
    };
  },
  methods: {
    getDeviceSignal() {
      let params = {
        dictValue:
          this.deviceMap.dictValue instanceof Array
            ? this.deviceMap.dictValue[this.activeN]
            : this.deviceMap.dictValue,
      };
      getPlcSignal(params).then((res) => {
        this.signalData = res.data;
      });
    },
    handlerCheckN(e) {
      this.activeN = e;
      this.getDeviceSignal();
    },
  },
  created() {
    this.deviceMap = filterDevicePlace(this.place);
  },
  mounted() {
    this.getDeviceSignal();
  },
};
</script>

<style lang="less" scoped>
.signal {
  max-height: calc(100vh - 50px);
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .label {
    display: flex;
    font-size: 14px;
    margin-bottom: 10px;
    .value {
      margin-left: auto;
    }
  }
  .SignalLabel {
    border-top: 1px solid #e6e6e6;
    padding-top: 7px;
    .title {
      font-size: 17px;
      font-weight: bold;
    }
  }
  .table {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 170px);
    .table_label {
      height: 40px;
      display: flex;
      padding: 5px 0;
      background-color: #edeff6;
      .item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .action {
        flex: 1.5;
      }
    }
    .list {
      flex: 1;
      border-top: 1px solid #e6e6e6;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .ul {
        display: flex;
        height: 30px;
      }
      .item {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        line-height: 30px;
        // max-height: calc(100vh- 40px);
      }
      .action {
        flex: 1.5;
        transform: translateY(-3px);
      }
    }
  }
  .location {
    display: flex;
    padding-bottom: 5px;
    border-bottom: 1px solid #e6e6e6;
    .item {
      flex: 1;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .type {
    flex: 1;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #e6e6e6;
    font-size: 14px;
  }
  .deviceNo {
    flex: 1;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #e6e6e6;
    font-size: 16px;
  }
  .activeN {
    border-bottom: 2px solid blue;
  }
}
</style>